<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">添加管理员</h5>
    <el-form ref="forms" class="form" :model="form" :rules="rules" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="form.realName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="手机号">
            <el-input v-model="form.phone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="邮箱">
            <el-input v-model="form.email" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="分公司"  prop="branchId">
            <el-select v-model="form.branchId" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item label="部门" prop="deptId">
          <el-select v-model="form.deptId" placeholder="请选择" @change="deptIdFn(form.deptId)">
            <el-option
              v-for="item in dtoOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="角色" prop="roleIds">
          <el-select
            v-model="form.roleIds"
            :disabled="roleStatus"
            multiple
            filterable
            :multiple-limit="1"
            allow-create
            default-first-option
            placeholder="请选择"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <Fromplatfrom @childfun="childfun"></Fromplatfrom> -->

      <!-- <el-row>
                <el-col :span="24">
                    <el-form-item label="权限">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
      </el-row>-->
      <el-col :span="24">
        <el-form-item>
          <el-button style="margin-top:30px" type="primary" @click="submitFn('forms')">立即提交</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<script>
import {
  saveAdminUser,
  listAdminDeptDTO,
  listAdminRoleDTO
} from "@/api/adminManage";
import { branchOfficeDropDown } from "@/api/doctorManage";
import Fromplatfrom from "../components/fromplatform";
export default {
  name: "AdminManageAdd",
  components: { Fromplatfrom },
  data() {
    return {
      roleOptions: [],
      roleStatus: true,
      form: {
        realName: "",
        username: "",
        password: "",
        phone: "",
        email: "",
        deptId: "",
        roleIds: [],
        branchId: ''
      },
      options: [],
      dtoOptions: [],
      rules: {
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        deptId: [{ required: true, message: "请选择部门", trigger: "blur" }],
        branchId: [
          { required: true, message: "请选择分公司", trigger: "blur" }
        ],
        roleIds: [{ required: true, message: "请选择角色", trigger: "blur" }],
        platform: [{ required: true, message: "请选择平台", trigger: "blur" }]
      }
    };
  },
  inject: ["reload"],
  mounted() {
    this.getDropList();
    this.list();
  },
  methods: {
    async list() {
      let res = await branchOfficeDropDown();
      console.log(res);
      if (res.data.code == 0) {
        this.options = res.data.data;
      }
    },
    /** 所属平台 */
    childfun(val) {
      console.log(val);
    },
    // 部门选择
    deptIdFn(e) {
      // console.log(e)
      this.form.roleIds = [];
      this.roleStatus = false;
      // 角色列表
      const datas = { id: e };
      listAdminRoleDTO(datas)
        .then(res => {
          // console.log(res)
          if (!res.data.code) {
            const resData = res.data.data;
            const newData = [];
            resData.forEach(e => {
              newData.push({
                value: e.id,
                label: e.roleName
              });
            });
            this.roleOptions = newData;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    getDropList() {
      // 部门列表
      listAdminDeptDTO()
        .then(res => {
          if (!res.data.code) {
            const resData = res.data.data;
            const newData = [];
            resData.forEach(e => {
              newData.push({
                value: e.id,
                label: e.deptName
              });
            });
            this.dtoOptions = newData;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    submitFn(e) {
      const tf = this.form;
      this.$refs[e].validate(valid => {
        if (valid) {
          for (var n in tf) {
            if (tf.hasOwnProperty(n)) {
              if (tf[n].length) {
                continue;
              }
              if (+tf[n] !== undefined) {
                tf[n] += "";
              }
            }
          }
          const datas = this.form;
          saveAdminUser(datas)
            .then(res => {
              console.log(res);
              if (!res.data.code) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success"
                });
                this.$router.push("/adminManageIndex");
                this.reload();
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 1px !important;
}
</style>
